<template>
  <card :title="title" more @handleMore="toApproval">
    <template v-slot:content>
      <div class="content">
        <el-table :data="tableData" style="width: 100%" height="100%">
          <!-- <el-table-column prop="summary" label="摘要" width="180"></el-table-column> -->
          <el-table-column prop="processDefinitionName" label="类型" align="center"></el-table-column>
          <el-table-column prop="name" label="流程名称" align="center"></el-table-column>
          <el-table-column prop="employee" label="员工" align="center"></el-table-column>
          <el-table-column prop="waitTime" label="滞留时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.isClaim===false"
                type="text"
                @click="clickClaim(scope.row)"
              >签收 &nbsp;</el-button>
              <el-button
                size="mini"
                v-if="scope.row.isClaim===true"
                type="text"
                @click="returnTask(scope.row)"
              >归还 &nbsp;</el-button>
              <el-button
                v-if="scope.row.isClaim !==false||scope.row.isClaim===true"
                type="text"
                @click="clickTaskPop(scope.row)"
                size="mini"
              >同意</el-button>
              <!-- <el-button size="mini" type="text" @click="clickTaskPop(scope.row)">同意</el-button> -->
              <!-- <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
              >驳回</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="审批"
          width="80%"
          :visible.sync="dynamicFormEditVisible"
          append-to-body
          @closed="closeDynamicEdit"
        >
          <approvalForm
            style="height:10rem"
            ref="approvalForm"
            :businessKey="businessKey"
            :taskId="taskId"
            :parentTaskId="parentTaskId"
            :confirmVisible="true"
            @closeForm="closeDynamicEdit"
            :currProcessForm="currProcessForm"
            :processInstanceId="processInstanceId"
            :dynamicFormData="dynamicFormData"
          />
        </el-dialog>
      </div>
    </template>
  </card>
</template>

  <script>
    import api from '@/api/workflow/task'
import card from "@/views/homePage/components/card";
import approvalForm from "@/views/components/approvalForm";
import { getBusinessForm } from "@/api/workflow/businessForm";
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dynamicFormEditVisible: false,
      businessKey: null,
      taskId: null,
      parentTaskId: null,
      currProcessForm: "",
      processInstanceId: null,
      dynamicFormData: ""
    };
  },
  components: {
    card,
    approvalForm
  },
  methods: {
    clickTaskPop(row) {
      this.businessKey = row.businessKey;
      this.processInstanceId = row.processInstanceId;
      this.taskId = row.id;
      this.parentTaskId = row.parentTaskId;
      console.log(this.parentTaskId);
      if (
        row.actProcessDefSetting &&
        row.actProcessDefSetting.businessType == 0
      ) {
        getBusinessForm(this.businessKey).then(response => {
          this.dynamicFormData = response.data;
          this.dynamicFormEditVisible = true;
          this.currProcessForm = "dynamicFormEdit";
        });
      } else {
        this.currProcessForm = row.actProcessDefSetting.componentName;
        this.dynamicFormEditVisible = true;
      }
    },
    //关闭办理弹出层
    closeDynamicEdit() {
      this.dynamicFormEditVisible = false;
      this.$emit("Reflush");
    },
    toApproval() {
      // console.log(type);
      this.$router.push("/oa2/approval");
    },
    //签收
    clickClaim(row) {
      this.$modal
        .confirm("是否确认签收此任务？")
        .then(() => {
          return api.claim(row.id);
        })
        .then(() => {
          this.$modal.msgSuccess("签收成功");
          this.$emit('Reflush')
        })
        .finally(() => {
        });
    },
    //归还任务
    returnTask(row) {
      this.$modal
        .confirm("是否确认归还此任务？")
        .then(() => {
          return api.returnTask(row.id);
        })
        .then(() => {
          this.$modal.msgSuccess("归还成功");
          this.$emit('Reflush')
        })
        .finally(() => {
        });
    }
  }
};
</script>

  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
</style>
